<template>
  <div class="sub-nav-com d-none d-sm-none d-md-block d-lg-block">
    <div class="row justify-content-lg-between">
      <div class="col col-lg-6  col-md-12 col-12">
        <ul v-if="company.data" class="left">
          <li>
            <div><img src="../../assets/images/adress.png" alt=""></div>
            <p v-if="company">{{company.data.hospitalAddress}}</p>
          </li>
          <li>
            <div><img src="../../assets/images/time.png" alt=""></div>
            <p>{{company.data.noHoliday}}</p>
          </li>
          <li v-if="company.data.callPhone">
            <div><img src="../../assets/images/call.png" alt=""></div>
            <a v-if="company" :href="`tel:${company.data.callPhone}`">{{company.data.callText}}</a>
          </li>
          <li v-else>
            <div><img src="../../assets/images/call.png" alt=""></div>
            <a v-if="company" :href="`tel:${company.company.mobile}`">急诊电话:{{company.company.mobile}}</a>
          </li>
        </ul>
      </div>
      <div class="col col-lg-6 col-md-12 col-12">
        <ul class="right d-flex flex-row justify-content-between">
          <li @click="go('zhengce')">
            <div class="icon iconfont icon-yibao"></div>
            <p>医保政策</p>
          </li>
          <li @click="go('liucheng')">
            <div class="icon iconfont icon-liucheng"></div>
            <p>就医流程</p>
          </li>
          <li @click="go('map')">
            <div class="icon iconfont icon-xianlu"></div>
            <p>来院线路</p>
          </li>
          <li @click="go('menzhen')">
            <div class="icon iconfont icon-menzhenpaiban"></div>
            <p>门诊排班</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    props: ['company'],
    computed: {},
    data() {
      return {}
    },
    components: {},
    mounted() {

    },
    methods: {
      go(type) {
        this.$router.push({path:'/about/allad/' + type})
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .sub-nav-com {
    .row {
      margin: 0;
      padding: 0;
      .col {
        padding: 0;
        &:first-child {
          background: @theme-color;
        }
        ul{
          margin-bottom: 0;
        }
        .left {
          .padding(10,0,0,33);
          li {
            display: flex;
            align-items: center;
            .margin(0, 0, 10, 0);
            .font-size(16);
            &:last-child {
              margin-bottom: 0;
            }
            a{
              color: #fff;
              text-decoration: none;
              padding-left: 5/@size;
            }
            img {
              .width(24);
              .height(24);
            }
            p {
              padding-left: 5px;
              font-family: MicrosoftYaHeiUI;
              color: #FFFFFF;
              letter-spacing: 0;
              margin-bottom: 0;
            }
          }
        }
        .right{
          margin-left: 8%;
          li{
            cursor: pointer;
            text-align: center;
            .icon{
              font-size: 70/@size;
              color: #fff;
            }
            &:nth-of-type(2){
              div,p{
                background: #FF8500;
              }
            }
            &:nth-child(3){
              div,p{
                background: #93D239;
              }
            }
            &:nth-child(4){
              div,p{
                background: #02ACD9;
              }
            }
            >div{
              .width(100);
              .height(100);
              background: @theme-color;

            }
            p{
             .margin(10,0,0,0);
              background: @theme-color;
              ont-family: MicrosoftYaHeiUI;
              font-size: 16/@size;
              color: #FFFFFF;
              .height(25);
              .line-height(25);
            }
          }
        }
      }
    }
  }

  @media (min-width: 320px) and (max-width: 992px) {
    .sub-nav-com{
      .row{
        .col{
          .left{
            padding-bottom: 20/@size;
          }
          .right{
            li{
              .icon{
                font-size: 90/@size;
              }
            }
            .margin(30,0,0,0);
          }
        }
      }
    }
  }

  @media (min-width:768px)and  (max-width: 992px)  {
    .sub-nav-com{
      .row{
        .col{
          .right{
            margin-top: 30/@size;
            margin-left: 0;
            li{
              >div{
                .width(150);
                .height(150);
              }
            }
          }
        }
      }
    }
  }

  @media (min-width:375px) and (max-width: 767px) {
    .sub-nav-com{
      .row{
        .col{
          .right{
            li{
              .icon{
                font-size: 50/@size;
              }
              >div{
                .width(80);
                .height(80);
              }
            }
          }
        }
      }
    }
  }

  @media (min-width: 320px) and (max-width: 374px) {
    .sub-nav-com{
      .row{
        .col{
          .right{
            li{
              .icon{
                font-size: 40/@size;
              }
              >div{
                .width(65);
                .height(65);
              }
              p{
                font-size: 14/@size;
              }
            }
          }
        }
      }
    }
  }




</style>
